import { useMemo, useContext, useState } from "react";

import { _ } from "~/lib/i18n";
import { ManagerContext, PageContext, DisplayModeContext } from "~/contexts";

import FloatingToolBar from "~/components/FloatingToolBar";
import UserItem from "~/components/UserItem";
import Draft from "~/components/Draft";
import SecondaryButton from "~/components/SecondaryButton";
import BackIcon from "~/components/icons/BackIcon";
import { Modal, ModalContext } from "~/components/modals/Modal";
import { APP_VERSION } from "~/version";

const containerStyle = {
  display: "flex",
  flexDirection: "column" as "column",
  flexWrap: "nowrap" as "nowrap",
  gap: "0.5em",
  padding: "0.8em",
};

const buttonStyle = {
  padding: "0.2em 0.6em",
  border: "1px solid #444",
  backgroundColor: "transparent",
  color: "white",
  cursor: "pointer",
  fontSize: "0.9em",
};

const activeButtonStyle = {
  ...buttonStyle,
  backgroundColor: "#444",
};

interface Props {
  setDisplayMode: React.Dispatch<React.SetStateAction<"default" | "compact">>;
  displayMode: "default" | "compact";
}

export default function NewPost({ setDisplayMode, displayMode: externalDisplayMode }: Props) {
  const manager = useContext(ManagerContext);
  const { setPage } = useContext(PageContext);
  const [showSettings, setShowSettings] = useState(false);
  
  const onClick = () => setPage({ key: "home" });
  
  const toolBar = useMemo(() => (
    <FloatingToolBar onSettingsClick={() => setShowSettings(true)}>
      <SecondaryButton onClick={onClick} style={{ padding: "5px 10px" }}>
        <BackIcon style={{ verticalAlign: "middle" }} />
      </SecondaryButton>
    </FloatingToolBar>
  ), [setPage]);

  const userM = useMemo(() => {
    return (
      <UserItem
        isAdmin={manager.isAdmin}
        userId={manager.selfId}
        name={manager.selfName}
      />
    );
  }, [manager]);

  const draftM = useMemo(() => <Draft />, []);

  const handleModeChange = (mode: "default" | "compact") => {
    setDisplayMode(mode);
    // 这里可以添加保存设置到 localStorage 的逻辑
    // localStorage.setItem('displayMode', mode);
  };

  return (
    <div>
      <DisplayModeContext.Provider value={externalDisplayMode}>
        {toolBar}
        <ModalContext.Provider value={{ isOpen: showSettings, setOpen: setShowSettings }}>
          <Modal>
            <div style={{ padding: "0.8em", minWidth: "180px" }}>
              <h3 style={{ fontSize: "1.1em", margin: "0 0 0.5em 0" }}>{_("Settings")}</h3>
              <div style={{ 
                display: "flex", 
                flexDirection: "column",
                gap: "0.3em",
                marginTop: "0.8em"
              }}>
                <div style={{ display: "flex", alignItems: "center", gap: "0.5em" }}>
                  <div style={{ fontSize: "0.8em" }}>{_("Display Mode")}:</div>
                  <div style={{ display: "flex", gap: "0.3em", fontSize: "0.8em"}}>
                    <button 
                      style={externalDisplayMode === "default" ? activeButtonStyle : buttonStyle}
                      onClick={() => handleModeChange("default")}
                    >
                      {_("Default")}
                    </button>
                    <button 
                      style={externalDisplayMode === "compact" ? activeButtonStyle : buttonStyle}
                      onClick={() => handleModeChange("compact")}
                    >
                      {_("Compact")}
                    </button>
                  </div>
                </div>
                <div style={{ 
                  fontSize: "0.7em",
                  marginTop: "0.5em", 
                  paddingTop: "0.5em", 
                  borderTop: "1px solid #444" 
                }}>
                  <small>{_("Version")}: {APP_VERSION}</small>
                </div>
              </div>
            </div>
          </Modal>
        </ModalContext.Provider>
        <div style={containerStyle}>
          {userM}
          {draftM}
        </div>
      </DisplayModeContext.Provider>
    </div>
  );
}